<template>
  <vxe-modal
    v-model="visible"
    ref="mymodal"
    showFooter
    esc-closable
    title="新增拆分规则"
    width="580"
    @close="closeFrom"
    @hide="closeFrom"
    remember
  >
    <div class="form-contianer">
      <el-form ref="newForm" :model="form" :rules="rules" label-width="115px">
        <el-form-item label="规则类型" prop="type">
          <el-select
            v-model="form.type"
            @change="changeType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物料选择" prop="material_code">
          <el-select
            :disabled="disable"
            v-model="form.material_code"
            clearable
            filterable
            placeholder="特殊规则时可选"
          >
            <el-option
              v-for="item in material"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拆分子单重量" prop="split_weight">
          <el-input
            v-model="form.split_weight"
            name="split_weight"
            type="number"
            placeholder="重量KG，保留两位有效小数"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递公司" prop="express_company_id">
          <el-select
            v-model="form.express_company_id"
            clearable
            filterable
            placeholder="快递ID在快递设置中查看"
          >
            <el-option
              v-for="item in companys"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则描述" prop="description">
          <el-input
            v-model="form.description"
            name="description"
            placeholder="可空，规则描述最长500字"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFrom" size="small">取 消</el-button>
      <el-button
        type="primary"
        @click.native.prevent="submitHandle"
        :loading="loading"
        size="small"
        >新 增</el-button
      >
    </div>
  </vxe-modal>
</template>

<script>
import { add } from '@/api/split'
export default {
  name: 'addGuize',
  props: {
    addDialog: {
      type: Boolean
    },
    material: {
      type: Array,
      default: function() {
        return []
      }
    },
    companys: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  watch: {
    addDialog(val) {
      this.visible = val
    },
    disable(val) {
      if (!val) {
        this.$set(this.rules, 'material_code', [
          { required: true, message: '特殊规则需要绑定物料', trigger: 'blur' }
        ])
      } else {
        this.$delete(this.rules, 'material_code')
      }
    }
  },
  created() {},
  data() {
    return {
      visible: false,
      loading: false,
      disable: true,
      options: [
        {
          value: 'all',
          label: '全局规则'
        },
        {
          value: 'special',
          label: '特殊规则(需要绑定物料)'
        }
      ],
      form: {
        type: 'all',
        description: '',
        split_weight: '',
        material_code: '',
        express_company_id: ''
      },
      rules: {
        type: [
          { required: true, message: '规则类型未必选项', trigger: 'blur' }
        ],
        split_weight: [
          { required: true, message: '拆分子单重量必填', trigger: 'blur' },
          {
            type: 'number',
            message: '必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        express_company_id: [
          { required: true, message: '快递公司必选', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeFrom() {
      this.$emit('update:addDialog', false)
    },
    submitHandle() {
      const that = this
      this.$refs.newForm.validate((valid) => {
        if (valid) {
          this.loading = true
          add(that.form)
            .then((res) => {
              this.loading = false
              this.$message({
                message: res.msg,
                type: 'success'
              })
              setTimeout(() => {
                that.closeFrom()
              }, 1000)
            })
            .catch((res) => {
              this.loading = false
            })
        } else {
          this.loading = false
          return false
        }
      })
    },
    changeType(e) {
      if (e === 'special') {
        this.disable = false
      } else {
        this.form.material_code = ''
        this.disable = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-contianer {
  padding: 25px 30px;
}
.flex2 {
  display: flex;
}
.el-select {
  width: 100%;
}
</style>
